Cómo hacer una web en HTML paso a paso

Lo utilizas muchas veces: conoce el significado del emoji de dedos cruzados

Los productos básicos para tener las toallas cada vez más suaves

web HTML
Aprende todos los pasos para crear una página web en html.

Para todos aquellos que comienzan en la programación informática y en la creación de páginas web, el lenguaje HTML es algo que debe estar a la orden del día. Si deseas poder aprender paso a paso cómo hacer una página web con HTML, será bueno que sigas leyendo esta guía con todos los pasos para hacer una web HTML a continuación.

Qué es el lenguaje HTML

Aunque es muy poderoso, HTML no es un lenguaje complejo y puede ofrecer satisfacciones inmediatas para la creación de páginas web. Es un lenguaje de marcado de hipertexto, de modo que a través de este lenguaje, un texto puede marcarse insertando etiquetas, describiendo su función, color, enlace u otras características.

Para comprobar en qué consiste este tipo de lenguaje bastará con hacer clic derecho en cualquier web. Podrás ver la opción de «Ver código fuente» que te permitirá comprobar cómo se estructura la web en HTML.

De todas formas, tenemos que decir que HTML no es realmente un lenguaje de programación, ya que no incluye ninguna definición de variables, estructuras de datos, funciones o estructuras de control, sino que es solo un lenguaje de marcado que describe el diseño, el formato gráfico o los modos o diseños de visualización gráfica. El contenido textual y no textual de una página web que utiliza etiquetas de formato.

Sin embargo, HTML admite la inclusión de scripts y objetos externos, como imágenes o películas.

La extensión de los archivos en este formato es .html (es más reciente) o .htm (es más obsoleto).

Para aquellos que deseen poder crear su propia página web pueden aprender a hacerlas a partir del dominio del lenguaje HTML tal y como os explicamos a continuación.

Pasos para hacer una página web en HTML

web HTML

Encabezado de la página web

Para comenzar a crear una nueva página web HTML, debes abrir un editor de texto, como el Bloc de notas. Puedes usar sin problema el que viene por defecto, en Windows. Una vez que hayas abierto el nuevo archivo, puedes comenzar escribiendo este código.

  • <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE> DEBES ESCRIBIR EL TITULO DE TU WEB </TITLE>
  • <META name="description" content=">donde escribirás una breve descripción de la página">
  • <META name="keywords" content="Aquí escribe las palabras clave separadas por una coma">
    </HEAD>
    <BODY>
  • </BODY>
    </HTML>

Explicación:

<! DOCTYPE HTML> define que el documento debe ser HTML.
<HTML> es el elemento principal de la página HTML.
<HEAD> es la parte donde se inserta información de la web.
<TITLE> es el título de la página que se muestra en la parte superior de la página navegador.

En el campo «contenido» de la metaetiqueta DESCRIPCIÓN debes ingresar una descripción que sea relevante para la página de tu sitio, mientras que en el otro campo de la etiqueta KEYWORDS, ingresa las palabras clave en las que deseas que se encuentre en particular la web que estás creando.

<BODY> es la parte del documento que contiene la parte «visible» del sitio:
Ahora guarda el archivo de bloque (usa GUARDAR CON NOMBRE) y guárdalo como index.html . Una vez guardado, lo abres, se abrirá la página web HTML vacía, pero ya podrás ver el título de la página en la parte superior.

Insertar un texto

Una vez has creado el comienzo de tu página web puedes comenzar a introducir el contenido. Para ello, el código html del texto debe colocarse entre las etiquetas <BODY> </ BODY> .

Ante se usaba la etiqueta FONT, pero como ya no es compatible, para formatear un texto de una manera particular, es necesario recurrir a CSS.

La etiqueta que se usa para ajustar en su lugar siempre es válida y es <br>. Entonces, si escribo en el bloc de notas:

  • Hola <br> esta es una prueba de mi web.

Lo que se mostrará en la página será:

>Hola,
esta es una prueba de mi web

La <br> inserta un salto de línea.
Esta es una etiqueta que no debe abrirse y luego cerrarse.

Ahora veamos cómo usar etiquetas útiles para el texto: entre las más usadas puedes utilizar negrita, cursiva, subrayado, borrado: <b>, <i>, <u> <del>

  • </u>te permite escribir con subrayado</u>
  • </i>te permite escribir en cursiva</i>
  • </b>te permite escribir en negrita</b>
  • <del>te permite cancelar un texto<del>

Estas etiquetas deben estar abiertas y cerradas . Podemos usar una a la vez o más etiquetas juntas (no se pueden usar juntas por razones obvias, la etiqueta para subrayar y eliminar).

Color del texto

Veamos cómo colorear el texto para hacer páginas web HTML atractivas. Debes adjuntar al texto que deseas colorear la etiqueta SPAN. Por sí solo, la etiqueta SPAN no produce ningún cambio visible en el texto, pero podemos imponer un estilo con CSS.
Aquí está el código html, el color se puede expresar con el nombre del color en inglés o con el número hexadecimal precedido por el número de la libra.

Ejemplo:

  • <span style=»color:blue»> aqui escribe el texto </span>

o

  • <span style=»color:#ffff45″> aqui escribe el texto </span>

Cambiar tipo de letra

Para crear un sitio en html que sea fácil de consultar, es útil cambiar la fuente y el tamaño del texto para resaltar un párrafo o no.

Para ello vamos a usar la etiqueta SPAN que también nos permite modificar partes del texto directamente en el documento HTML.

De este modo, usas esta etiqueta a la que tendrás que sumarle la fuente o nombre del estilo de letra que deseas para tu texto tal que así:

  • <span style=»font-family:verdana»> aquí escribe tu texto </span>

o

  • <span style=»font-family:’Comic Sans MS’»> aquí escribe tu texto </span>

Cambiar tamaño de letra

A veces será necesario usar un texto un poco más grande o ligeramente más pequeño que el predeterminado. Aquí también, el tamaño de fuente se indica con el estilo CSS y ya no con el atributo de fuente «tamaño».

  • <span style=»font-size:12px»> aquí va el texto </span>

Para cambiar el tamaño de la fuente, simplemente cambia el número expresado en píxeles, en el ejemplo, 12.

Cómo insertar una imagen

Las imágenes en los sitios web HTML y permitidas en la web son básicamente de tres tipos: GIF , JPG y PNG . Por lo tanto, no uses otros tipos de imágenes (como archivos psd de Photoshop).

El código para insertar una imagen es:

  • <img src=»immagine.gif» alt=»descripción de la imagen» height=»42″ width=»42″ >

Reemplaza el nombre «immagine.gif» con el nombre de tu imagen: presta atención a la extensión de la imagen: jpg, gif …

Prueba tu página web

Una vez has comenzado a saber cómo utilizar el lenguaje HTML de manera básica para poder insertar lo escrito en tu web y que ésta vaya tomando forma, podrás ir diseñando otros aspectos de la misma como añadir enlaces (con el tag href) o una lista (con el tag ul y li). Pero todo ello lo irás aprendiendo a medida que vayas practicando y haciendo tu página web.

Lo último en ¿Cómo se hace?

Últimas noticias